<template>
  <el-form :label-position="'right'" label-width="92px" :model="myInformation" :rules="rules" ref="form"
    class="myInfomation">
    <el-form-item label="姓名：" prop="realName">
      <el-input v-model="myInformation.realName" placeholder="请输入真实姓名" @keypress.enter.native.prevent></el-input>
    </el-form-item>
    <el-form-item label="昵称：" prop="nickName">
      <el-input v-model="myInformation.nickName" placeholder="请输入账号昵称" @keypress.enter.native.prevent></el-input>
    </el-form-item>
    <el-form-item label="用户名：" prop="regName">
      <el-input v-model="myInformation.regName" placeholder="请输入登录用户名，建议使用学号或工号"
        @keypress.enter.native.prevent></el-input>
    </el-form-item>

    <el-form-item label="手机：" prop="mPhone">
      <el-input v-model="myInformation.mPhone" placeholder="请输入手机号" @keypress.enter.native.prevent></el-input>
    </el-form-item>
    <!-- <el-form-item label="所在城市：">
      <el-select v-model="myInformation.province" placeholder="选择省份">
        <el-option
          v-for="(item, index) in areaData['86']"
          :key="index"
          :label="item"
          :value="index"
        >
        </el-option>
      </el-select>
      <el-select v-model="myInformation.city" placeholder="选择城市">
        <el-option
          v-for="(item, index) in areaData[`${myInformation.province}`]"
          :key="index"
          :label="item"
          :value="index"
        >
        </el-option>
      </el-select>
      <el-select v-model="myInformation.region" placeholder="选择区县">
        <el-option
          v-for="(item, index) in areaData[`${myInformation.city}`]"
          :key="index"
          :label="item"
          :value="index"
        >
        </el-option>
      </el-select>
    </el-form-item> -->
    <el-form-item label="性别：" prop="gender">
      <el-radio-group v-model="myInformation.gender">
        <!-- <el-radio label="保密" @keypress.enter.native.prevent>保密</el-radio> -->
        <el-radio label="女" @keypress.enter.native.prevent>女</el-radio>
        <el-radio label="男" @keypress.enter.native.prevent>男</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="个人简介：">
      <el-input style="margin-top: 3px" type="textarea" v-model="myInformation.userDesc" placeholder="填写个人简介"
        @keypress.enter.native.prevent></el-input>
    </el-form-item>
    <el-form-item label="我的标签：">
      <el-input style="margin-top: 3px" type="textarea" v-model="myInformation.textShow" placeholder="填写个性签名"
        @keypress.enter.native.prevent></el-input>
    </el-form-item>
    <div class="btnBox">
      <button @click.prevent="handelConfirm">保存</button>
    </div>
  </el-form>
</template>

<script>
// import jsonData from "@/util/areaData";
import { updateUserInfo } from "@/request/user";
import { mapState } from "vuex";
export default {
  data() {
    let phomeReg = /^((13[0-9])|(14[5-9])|(15([0-3]|[5-9]))|(16[6-7])|(17[1-8])|(18[0-9])|(19[1|3])|(19[5|6])|(19[8|9]))\d{8}$/
    var validatemPhone = (rule, value, callback) => {
      if (!phomeReg.test(value)) {
        if (!value) callback()
        callback(new Error("请输入11位，正确的手机号！"));
      } else {
        callback();
      }
    };
    return {
      areaData: {}, // 地区json数据
      myInformation: {
        regName: "", // 登录名
        nickName: "", // 昵称
        textShow: "", // 个性签名
        userDesc: "", //个人简介
        gender: "", // 性别
        realName: "", // 真是姓名
        mPhone: null,
        // province: "", // 省
        // city: "", // 市
        // region: "", // 区
      },
      rules: {
        nickName: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur",
          },
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change",
          },
        ],
        mPhone: [
          {
            trigger: "blur",
            validator: validatemPhone
          }
        ]
      },
    };
  },
  watch: {
    // "myInformation.province"(n, o) {
    //   this.myInformation.city = "";
    // },
    // "myInformation.city"(n, o) {
    //   this.myInformation.region = "";
    // },
    userInfo(n, o) {
      this.updateMyInformation();
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  created() {
    // this.areaData = jsonData;
    this.updateMyInformation();
  },
  methods: {
    updateMyInformation() {
      this.myInformation.regName = this.userInfo.regName;
      this.myInformation.nickName = this.userInfo.nickName;
      this.myInformation.realName = this.userInfo.realName
      this.myInformation.userDesc = this.userInfo.userDesc;
      this.myInformation.textShow = this.userInfo.textShow;
      this.myInformation.gender = this.userInfo.gender;
      this.myInformation.mPhone = this.userInfo.mPhone;
    },
    // 提交 检查表单
    handelConfirm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 信息校验成功
          this.handelSubmit();
        } else {
          // 信息校验不通过
          return false;
        }
      });
    },
    // 更新
    handelSubmit() {
      let params = {
        userdetail: {
          userID: this.userInfo.userID,
          realName: this.myInformation.realName,
          userDesc: this.myInformation.userDesc,
          textShow: this.myInformation.textShow,
          gender: this.myInformation.gender,
        },
      };
      if (this.myInformation.nickName || this.myInformation.regName || this.myInformation.mPhone) {
        params["user"] = {
          userID: this.userInfo.userID,
          regName: this.myInformation.regName,
          nickName: this.myInformation.nickName,
          mPhone: Number(this.myInformation.mPhone),
        };
        if(!params.user.mPhone){
          delete params.user.mPhone
        }
      }
      updateUserInfo(params).then((res) => {
        if (res.errno === 0) {
          this.$store.dispatch("courses/getMyCourses", { that: this });
          // if (this.userInfo.authNum.indexOf(1) !== -1) {
          //   this.$store.dispatch("courses/fetchChooseCourses", this);
          // }
          // let payload = Object.assign(
          //   { token: true, isRemember: false },
          //   res.data
          // );
          // // 记录用户信息
          // this.$store.commit("changeUserInfo", payload);
          // // 先移除信息
          // this.$store.commit("removeUserinfolocaStorage");
          // // 保存用户信息到cookie
          // this.$store.commit("setUserinfolocaStorage", payload);.
          // 重新获取用户信息
          this.$store.dispatch('user/reacquireUserInfo', res.data)
          this.$antdMessage.success({
            content: "修改成功！",
          });
        } else {
          this.$antdMessage.error({
            content: res.message || "修改失败！",
          });
        }
      });
    },
  },
};
</script>

<style lang="stylus">
.myInfomation {
  .el-form-item {
    .el-form-item__label {
      height: 30px;
      line-height: 30px;
      font-family: Segoe UI;
      font-size: 16px;
      color: #909090;
    }

    .el-form-item__content {
      line-height: 30px;

      .el-input {
        .el-input__inner {
          border: solid 1px rgba(112, 112, 112, 0.6);
        }
      }

      // .el-select {
      // margin-right: 20px;
      // border-radius: 5px;

      // .el-input {
      // width: 100px !important;
      // height: 30px;
      // line-height: 30px;
      // line-height: 1;

      // .el-input__inner {
      // width: 100px;
      // padding-right: 20px;
      // border: solid 1px rgba(112, 112, 112, 0.6);
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      // font-family: Segoe UI;
      // font-size: 14px;
      // // color: #909090;
      // }

      // .el-input__suffix {
      // right: 0;

      // .el-input__suffix-inner {
      // .el-input__icon {
      // line-height: 30px;
      // transform: rotate(360deg);
      // }

      // .is-reverse {
      // transform: rotate(540deg);
      // }

      // .el-select__caret::before {
      // content: '\e790';
      // }
      // }
      // }
      // }
      // }
      .el-textarea {
        .el-textarea__inner {
          resize: none;
          width: 340px;
          height: 80px;
          background-color: #ffffff;
          border-radius: 5px;
          border: solid 1px #bfbfbf;
        }
      }

      .el-radio-group {
        .el-radio {
          .el-radio__input {
            .el-radio__inner {
              width: 18px;
              height: 18px;
              background-color: #ececec;
              border: solid 1px #bebebe;
            }
          }

          .is-checked {
            .el-radio__inner {
              border-color: #ececec;
            }

            .el-radio__inner::after {
              width: 10px;
              height: 10px;
              background: #666666;
            }
          }

          .el-radio__label {
            font-family: Segoe UI;
            font-size: 16px;
            color: #909090;
          }
        }
      }
    }
  }

  .btnBox {
    button {
      margin-left: 90px;
      cursor: pointer;
      outline: none;
      width: 50px;
      height: 25px;
      background-color: #f6061e;
      border-radius: 5px;
      // border: solid 1px #f6061e;
      border: none;
      font-family: Segoe UI;
      font-size: 14px;
      color: #ffffff;
    }
  }
}
</style>